<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>会员卡管理-充值记录</title>
  <link rel="stylesheet" type="text/css" href="../../../../themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../../../../themes/icon.css">
  <script type="text/javascript" src="../../../../easyui/js/jquery.min.js"></script>
  <script type="text/javascript" src="../../../../easyui/js/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="../../../../easyui/js/datagrid-detailview.js"></script>
  <style>
    body {
      font-size: 14px;
      padding: 0;
      margin: 0;
      background-color: #eee;
    }
    a {
      display: inline-block;
      text-decoration: none;
      color: #000;
      padding: 0;
      margin: 0;
    }
    .container {
      padding: 50px;
    }
    .title-back {
      font-size: 16px;
      color: #000;
      font-weight: 700;
      margin-bottom: 30px;
    }
    .content-title {
      font-size: 14px;
      padding: 10px;
      font-weight: 700;
    }
    .search{
      background-color: #ffffff;
      border-radius: 10px;
      overflow: hidden;
    }
    .form-content{
      display: flex;
      flex-wrap: wrap;
      margin-left: 20px;
      margin-bottom: 20px;
    }
    .form-item{
      height: 30px;
      line-height: 30px;
      margin-right: 20px;
      margin-top: 20px;
    }
    .form-item .btn {
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      background: rgba(64, 158, 255, 1);
      border-radius: 5px;
    }
    .form-item .btn.reset{
      background-color: #f56c6c;
    }
    .rechargeMain {
      background-color: #fff;
      margin-top: 50px;
      border-radius: 10px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="title title-back"> < 会员卡充值记录</div>
    <div class="search">
      <div class="content-title">查询</div>
      <form class="form-content" id="search-form" method="post">
        <div class="form-item">
          <label for="handler">办理人:</label>
          <input class="easyui-validatebox" placeholder="请输入" type="text" id="handler" name="handler" style="width: 270px;height: 30px;"/>
        </div>
        <div class="form-item">
          <label for="businessName">办理人联系电话:</label>
          <input class="easyui-validatebox" placeholder="请输入" type="text" id="businessName" name="businessName" style="width: 270px;height: 30px;"/>
        </div>
        <div class="form-item">
          <label for="membershipCardNumber">企业名称:</label>
          <input class="easyui-validatebox" placeholder="请输入" type="text" id="membershipCardNumber" name="membershipCardNumber" style="width: 270px;height: 30px;"/>
        </div>
        <div class="form-item">
          <label for="membershipCardNumber">会员卡号:</label>
          <input class="easyui-validatebox" placeholder="请输入" type="text" id="membershipCardNumber" name="membershipCardNumber" style="width: 270px;height: 30px;"/>
        </div>

        <div class="form-item">
          <label for="defaultGrouping">默认分组：</label>
          <select id="defaultGrouping" class="easyui-combobox" placeholder="请选择" name="dept" style="width:270px;height: 30px;">
            <option>已登记</option>
            <option>已收费</option>
            <option>已退费</option>
          </select>
        </div>
        <div class="form-item">
          <label for="membershipCardNumber">充值时间:</label>
          <input id="dd" type="text" class="easyui-datebox" style="width:250px;height: 30px;" >
        </div>
        <div class="form-item">
          to
        </div>
        <div class="form-item">
          <input id="dd" type="text" class="easyui-datebox" style="width:250px;height: 30px;" >
        </div>

        <div class="form-item">
          <a href="#" class="btn">查询</a>
          <a href="#" class="btn reset">重置</a>
        </div>
      </form>
    </div>

    <!-- 充值记录 -->
    <div class="rechargeMain">
      <div class="content-title">充值记录</div>
      <div class="charges-content">
        <table 
          id="dg" 
          class="easyui-datagrid" 
          data-options="ctrlSelect:true,pagination:true" 
          style="width:1480px;"
          title="充值记录"
          singleSelect="true" fitColumns="true"
        >
          <thead>
            <tr>
              <th data-options="field:'a1',width:30,align:'center'"></th>
              <th data-options="field:'a3',width:50,align:'center'">序号</th>
              <th data-options="field:'a4',width:150,align:'center'">订单编号</th>
              <th data-options="field:'a5',width:100,align:'center'">办理方式</th>
              <th data-options="field:'a6',width:100,align:'center'">充值途径</th>
              <th data-options="field:'a7',width:80,align:'center'">办理人</th>
              <th data-options="field:'a8',width:150,align:'center'">办理人联系电话</th>
              <th data-options="field:'a9',width:200,align:'center'">企业名称</th>
              <th data-options="field:'a10',width:100,align:'center'">充值金额</th>
              <th data-options="field:'a11',width:150,align:'center'">增费金额</th>
              <th data-options="field:'a12',width:80,align:'center'">充值人数</th>
              <th data-options="field:'a13',width:100,align:'center'">会员卡类型</th>
              <th data-options="field:'a14',width:180,align:'center'">充值时间</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td></td>
              <td>1</td>
              <td>165161651516</td>
              <td>个人充值</td>
              <td>APP充值</td>
              <td>李锐</td>
              <td>13565485691</td>
              <td>信息科技有限公司</td>
              <td>1000.00元</td>
              <td>100.00 元</td>
              <td>1</td>
              <td>九折卡</td>
              <td>2024-05-06 13:25:26</td>
            </tr>
            <tr>
              <td></td>
              <td>2</td>
              <td>165161651516</td>
              <td>个人充值</td>
              <td>APP充值</td>
              <td>李锐</td>
              <td>13565485691</td>
              <td>信息科技有限公司</td>
              <td>1000.00元</td>
              <td>100.00 元</td>
              <td>1</td>
              <td>九折卡</td>
              <td>2024-05-06 13:25:26</td>
            </tr>
            <tr>
              <td></td>
              <td>3</td>
              <td>165161651516</td>
              <td>个人充值</td>
              <td>APP充值</td>
              <td>李锐</td>
              <td>13565485691</td>
              <td>信息科技有限公司</td>
              <td>1000.00元</td>
              <td>100.00 元</td>
              <td>1</td>
              <td>九折卡</td>
              <td>2024-05-06 13:25:26</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script>
    $(function () {
      $(".title-back").on("click", function () {
        window.location.href = './recharge-record.html'
      })
      $('#dg').datagrid({
          view: detailview,
          detailFormatter:function(index,row){
              return '<div style="padding:2px"><table class="ddv"></table></div>';
          },
          onExpandRow: function(index,row){
              var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
              ddv.datagrid({
                  url:'',
                  fitColumns:true,
                  singleSelect:true,
                  rownumbers:true,
                  loadMsg:'',
                  height:'auto',
                  columns:[[
                      {field:'orderid',title:'序号',width:50},
                      {field:'quantity',title:'会员卡号',width:50},
                      {field:'unitprice',title:'姓名',width:50},
                      {field:'orderid',title:'性别',width:50},
                      {field:'quantity',title:'年龄',width:50},
                      {field:'unitprice',title:'联系电话',width:80},
                      {field:'orderid',title:'证件类型',width:50},
                      {field:'quantity',title:'证件号码',width:50},
                      {field:'unitprice',title:'充值金额',width:50},
                      {field:'orderid',title:'赠费金额',width:50},
                      {field:'orderid',title:'操作',width:50},
                  ]],
                  onResize:function(){
                      $('#dg').datagrid('fixDetailRowHeight',index);
                  },
                  onLoadSuccess:function(){
                      setTimeout(function(){
                          $('#dg').datagrid('fixDetailRowHeight',index);
                      },0);
                  }
              });
              $('#dg').datagrid('fixDetailRowHeight',index);
          }
      });


    })
  </script>
</body>
</html>
